import {TouchableOpacity, View} from 'react-native';
import {ObserverView, ObserverText, Img} from '../../components';
import {dpw10, dpw20, dpw24, dpw4, dpw6} from '../../constants';
import coinPng from '../../assets/img/common/coin.png';

const ProductItem = (props: any) => {
  const {
    Id,
    Name,
    Description,
    BaseDescribe,
    IsSell,
    IsRecommend,
    IsHot,
    onPress,
    actId,
  } = props;

  return (
    <TouchableOpacity
      key={Id}
      style={{width: '50%', padding: dpw4}}
      onPress={() => onPress(props)}>
      <ObserverView
        style={{borderWidth: 1, paddingVertical: dpw20}}
        themeStyle={{
          borderColor: actId === Id ? 'color_1' : 'color_9',
          backgroundColor: actId === Id ? 'color_32' : 'color_2',
        }}>
        <ObserverText
          style={{textAlign: 'center', fontWeight: 700}}
          tKey={Name}
        />
        <View
          style={{
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'center',
          }}>
          <ObserverText size="mini" tKey={Description} />
          <ObserverText size="mini" tKey={BaseDescribe} type="primary" />
        </View>
        {IsSell && (
          <ObserverText
            style={{
              position: 'absolute',
              right: 0,
              paddingHorizontal: dpw6,
              borderRadius: 0,
              borderBottomLeftRadius: dpw10,
            }}
            tKey="double"
            type="tag"
          />
        )}
        {IsRecommend && (
          <ObserverText
            style={{
              position: 'absolute',
              bottom: 0,
              paddingHorizontal: dpw6,
              borderRadius: 0,
              borderTopRightRadius: dpw10,
            }}
            tKey="recommend"
            type="tag"
          />
        )}
        {IsHot && (
          <Img
            url={coinPng}
            style={{
              position: 'absolute',
              width: dpw24,
              height: dpw24,
              left: 0,
              top: -dpw10,
            }}
            isJoin={false}
          />
        )}
      </ObserverView>
    </TouchableOpacity>
  );
};

export default ProductItem;
